<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-10 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-shield text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-primary">管理系统</h1>
        </div>
        <div class="flex items-center space-x-6">
            <span id="current-time" class="text-sm text-gray-600"></span>
            <button class="text-gray-600 hover:text-primary transition-all-300">
                <i class="fa fa-sign-out mr-1"></i>退出登录
            </button>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow flex flex-col items-center justify-center px-4 py-12">
    <div class="w-full max-w-2xl bg-white rounded-xl shadow-lg p-8 md:p-10 transform transition-all duration-500 hover:shadow-xl">
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
                <i class="fa fa-user-circle text-3xl"></i>
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2 text-shadow">尊敬的管理员，欢迎您</h2>
            <p class="text-gray-500">今天也是高效工作的一天！</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
            <div class="bg-neutral rounded-lg p-4 text-center hover:bg-primary/5 transition-all-300">
                <i class="fa fa-tachometer text-primary text-xl mb-2"></i>
                <p class="text-sm text-gray-600">数据概览</p>
            </div>
            <div class="bg-neutral rounded-lg p-4 text-center hover:bg-primary/5 transition-all-300">
                <i class="fa fa-cog text-primary text-xl mb-2"></i>
                <p class="text-sm text-gray-600">系统设置</p>
            </div>
            <div class="bg-neutral rounded-lg p-4 text-center hover:bg-primary/5 transition-all-300">
                <i class="fa fa-question-circle text-primary text-xl mb-2"></i>
                <p class="text-sm text-gray-600">帮助中心</p>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white py-4 border-t">
    <div class="container mx-auto px-4 text-center text-sm text-gray-500">
        <p>© 2023 管理系统 版权所有</p>
    </div>
</footer>

<script>
    // 显示当前时间
    function updateTime() {
        const now = new Date();
        const options = {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        };
        document.getElementById('current-time').textContent = now.toLocaleString('zh-CN', options);
    }

    // 初始化时间并每秒更新
    updateTime();
    setInterval(updateTime, 1000);

    // 页面滚动时导航栏效果
    window.addEventListener('scroll', () => {
        const header = document.querySelector('header');
        if (window.scrollY > 10) {
            header.classList.add('py-2');
            header.classList.remove('py-3');
        } else {
            header.classList.add('py-3');
            header.classList.remove('py-2');
        }
    });
</script>
</body>
</html>